<template>
    <div id="container">
        <h1>{{title}}</h1>
        <div class="author">
            <a>
                <a-avatar
                        :src="avatar"
                        slot="avatar"
                />
                <span>{{author}}</span>
                <div style="display: inline" v-if="$store.state.userData.id != authorId">
                    <a-button shape="round" size="small" type="primary" v-if="!authorFollowed"
                              v-on:click="authorFollowed = !authorFollowed">
                        关注
                    </a-button>
                    <a-button shape="round" size="small" type="default" v-else
                              v-on:click="authorFollowed = !authorFollowed">
                        取消关注
                    </a-button>
                </div>
            </a>
        </div>
        <a-row :gutter="16">
            <a-col :span="20">
                <!-- 仅预览模式 -->
                <mavon-editor :boxShadow="false" :ishljs="true" :subfield="false"
                              :toolbarsFlag="false"
                              :value="content"
                              defaultOpen="preview"
                              class="viewer"
                />
            </a-col>
            <a-col :span="4" id="right-panel">
                <a-affix :offset-top="affixOffsetTop">
                    <a class="author" style="line-height: 3;">
                        <a-avatar
                                :src="avatar"
                                slot="avatar"
                        />
                        <span>{{author}}</span>
                        <div style="display: inline" v-if="$store.state.userData.id != authorId">
                            <a-button shape="round" size="small" type="primary" v-if="!authorFollowed"
                                      v-on:click="authorFollowed = !authorFollowed">
                                关注
                            </a-button>
                            <a-button shape="round" size="small" type="default" v-else
                                      v-on:click="authorFollowed = !authorFollowed">
                                取消关注
                            </a-button>
                        </div>
                    </a>
                    <div class="articles">
                        <p v-bind:key="item.title" v-for="item in authorArticles">
                            <router-link :to="'/article/' + item.id">{{item.title}}</router-link>
                        </p>
                    </div>
                </a-affix>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import axios from "axios";
    import {Affix, Avatar, Button, Col, Row} from "ant-design-vue";

    export default {
        name: "Article",
        components: {
            AAvatar: Avatar,
            AButton: Button,
            ARow: Row,
            ACol: Col,
            AAffix: Affix
        },
        data() {
            return {
                title: "",
                content: "",
                avatar: "",
                author: "",
                authorId: -1,
                authorArticles: [],

                loading: true,
                authorFollowed: false
            }
        },
        mounted() {
            this.loadArticle();
        },
        methods: {
            loadArticle: function () {
                let paths = [{link: '/', name: '首页'}];

                let vue = this;
                axios.get(`/article/${this.$route.params.article_id}/`).then(function (response) {
                    let article = response.data.article;
                    vue.title = article.title;
                    vue.content = article.content;
                    vue.author = article.author_nickname;
                    vue.authorId = article.author;

                    vue.authorArticles = response.data.author_articles;

                    // vue.avatar = article.avatar;
                    paths.push({link: '', name: article.title});
                    vue.loading = false;
                })
                // 修改面包屑路径
                this.$emit('changePaths', paths);
            }
        },
        computed: {
            affixOffsetTop: function () {
                return document.getElementById('headerBar').offsetHeight + 25;
            }
        },
        watch: {
            // 监听路由params变化
            $route() {
                this.loadArticle();
            }
        }
    }
</script>

<style scoped>
    /* 只有屏幕宽度大于1200px才生效 */
    @media screen and (min-width: 1550px) {
        #container {
            margin: 0 10rem;
        }
    }

    h1 {
        font-size: 30px;
        font-weight: 700;
    }

    .author {
        padding-bottom: 20px;
    }

    .author > a {
        font-size: 16px;
        color: #ec7259;
    }

    .author * {
        margin-right: 10px;
    }

    #right-panel {
        margin-top: 20px;
    }

    .articles a {
        color: unset;
    }

    .articles a:hover {
        text-decoration: underline;
    }

    .viewer {
        /* 将父元素取消position设置，子元素的图片遮罩才能用z-index覆盖所有元素 */
        position: unset;
    }

    .viewer >>> img {
        max-width: 50%;
        cursor: zoom-in;
    }

    .viewer >>> div.v-note-img-wrapper {
        z-index: 101;
    }

    .viewer >>> div.v-note-img-wrapper > img {
        cursor: zoom-out;
    }
</style>